<template>
	<view>
		<view class="example-body">
			<uni-nav-bar :statusBar="true" 
			left-icon="arrowleft"
			backgroundColor="#fff1e6"
			@clickRight="releaseSubmit"  
			@clickLeft="back">
				<template v-slot:default>
					<view class="nav-bar-title" @click="changeAuthority">
						{{authority}}
						<view class="uni-icon  uni-icon-arrowdown"></view>
					</view>
				</template>
				<template v-slot:right>
					<view class="right-icon iconfont icon-fasong"></view>
				</template>
			</uni-nav-bar>
		</view>
		<scroll-view scroll-y="true" :style="{'height': scrollViewHeight + 'px','padding':'0 0 10px 0','box-sizing':'border-box'}">
			<view class="avatr-container">
				<avatar 
				:showAttention="false" 
				:showPostedTime="false"
				:nickname="user.nickName"
				:avatarUrl="user.avatarUrl"
				:nickNameSize='30'></avatar>
			</view>
			<view class="release-content uni-textarea">
				<textarea :value="textareaValue" placeholder="记录一下美好生活吧~" @input="getValue"/>
			</view>
			
			<!-- 上传多图 -->
			<upload-img @getImgList="getImgList" v-if="uploadType == 1" :imgList="imageList"></upload-img>
			
			<upload-video v-if="uploadType == 2"></upload-video>
			
			
			<view class="positioning-container iconfont icon-dingwei" v-if="addressName != ''">{{addressName}}</view>
			<view class="tags-show-container flex-ali-center">
				<block v-for="(item,index) in tagList" :key="index">
					<view class="show-tag-item link-text-color">#{{item}}</view>
				</block>
			</view>
			<view class="tags-container">
				<view class="tag-item iconfont icon-biaoqian" @click="addTags">添加标签</view>
				<view class="tag-item iconfont icon-dingwei" @click="addAddress">添加地点</view>
			</view>
		</scroll-view>
		
		<!-- 弹出提示框 -->
		<uni-popup ref="popup" type="center" animation @change="change">
			<view class="popup-content">
				<image src="../../static/imgs/tishi.png" mode="heightFix" lazy-load/>
				<view class="text-title">
					严禁发表一下信息
				</view>
				<view class="text-content">
					<view>
						1、涉及黄色、政治、广告及骚扰信息
					</view>
					<view>
						2、涉及人身攻击、恶意侮辱他人信息
					</view>
					<view>
						3、未经他人允许，私自透露他人隐私
					</view>
					<view>
						一经核实，情节严重永久封禁
					</view>
				</view>
				<view class="hidden-btn" @click="hiddenpopup">
					我是三好青年
				</view>
			</view>
		</uni-popup>
		
		<!-- 弹出提示框 -->
		<uni-popup ref="popupTag" type="center" animation @change="popuChange">
			<view class="popup-tag-content">
				<view class="popup-title">添加标签</view>
				<view class="popu-prompt">
					<input type="text" v-model="tagName" class="friend-name-input"  placeholder="请输入标签"/>
				</view>
				<view class="popu-butons">
					<view class="cancel-btn" @click="cancelPopu">取消</view>
					<view class="confirm-btn" @click="confirmPopu">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
	import uploadImg from '@/components/upload_img/upload_img.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue';
	import avatar from '@/components/avatar/avatar.vue';
	import uploadVideo from '@/components/upload_video/upload_video.vue';
	
	export default {
		data() {
			return {
				authority:"发布趣事",
				textNum:0,
				textareaValue:'',
				imageList:[],
				user:{},
				uploadType:1,
				tagList:[],
				tagName:'',
				addressName:"",
				scrollViewHeight:500
			}
		},
		components:{
			uniNavBar,
			uniIcons,
			uniStatusBar,
			uploadImg,
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare,
			avatar,
			uploadVideo
		},
		onLoad() {
			this.user = this.$utils.getStorage("user")
			// uni.getLocation({
			// 	geocode:true,
			// 	success:(res)=>{
			// 		console.log(res)
			// 	}
			// })
			let res = uni.getSystemInfoSync()
			console.log(res)
			this.scrollViewHeight = res.windowHeight - 88
			console.log(this.scrollViewHeight)
		},
		onReady() {
			this.toggle()
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			releaseSubmit(){
				console.log("发布")
			},
			changeAuthority(){
				uni.showActionSheet({
				   itemList: ["发布趣事","上传视频"],
					success: (res) =>{
						switch (res.tapIndex){
							case 0:
								this.authority = "发布趣事"
								this.uploadType = 1
							break;
							case 1:
								this.authority = "上传视频"
								this.uploadType = 2
							break;
						}
					}
					
				});
			},
			getValue(e){
				this.textareaValue = e.detail.value
				this.textNum = e.detail.cursor
			},
			getImgList(e){
				this.imageList = e
			},
			change(e) {
			},
			toggle() {
				this.$refs.popup.open()
			},
			hiddenpopup(e){
				this.$refs.popup.showPopup = false
			},
			addTags(){
				this.$refs.popupTag.open()
			},
			addAddress(){
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.addressName = res.name
						// this.hasLocation = true;
						// this.location = formatLocation(res.longitude, res.latitude);
						// this.locationAddress = res.address
					}
				})
			},
			cancelPopu(){
				this.$refs.popupTag.showPopup = false
			},
			popuChange(e){
			},
			confirmPopu(){
				this.tagList.push(this.tagName)
				this.tagName = '';
				this.$refs.popupTag.showPopup = false
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar-title{
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		.uni-icon{
			font-size: 32rpx !important;
		}
	}
	.popup-tag-content{
		background-color: #FFF;
		width: 550rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		transform: translateY(-25%);
		.popup-title{
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			border-bottom: 1rpx #F2F2F2 solid;
		}
		.popu-prompt{
			font-size: 30rpx;
			color: #666666;
			padding: 60rpx 40rpx;
		}
		.popu-butons{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.confirm-btn{
				background-color: $fun-theme-color;
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom-right-radius: 20rpx;
			}
			.cancel-btn{
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom-left-radius: 20rpx;
			}
		}
	}
	.release-content{
		width: 97%;
		margin: 15rpx auto;
		height: 300rpx;
		border-radius: 10rpx;
	}
	.release-content-row{
		display: flex;
		flex-direction: row-reverse;
		color: #969696;
		view{
			margin-right: 30rpx;
			font-size: 25rpx;
		}
	}
	.avatr-container{
		padding: 20rpx;
		box-sizing: border-box;
		background: linear-gradient(#fff1e6,#FFF);
	}
	.right-icon{
		font-size: 50rpx;
		// color: #FFEB3B;
		color: #333;
	}
	.tags-container{
		margin: 20rpx;
		border-top: 1rpx #F2F2F2 solid;
		display: flex;
		flex-wrap: wrap;
		.tag-item{
			background-color: #F2F2F2;
			font-size: 26rpx;
			color: #888888;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			margin: 10rpx;
		}
	}
	.tags-show-container{
		margin: 10rpx 20rpx;
		.show-tag-item{
			font-size: 26rpx;
			margin: 10rpx;
		}
	}
	.positioning-container{
		margin: 10rpx 20rpx;
		font-size: 24rpx;
		color: #999;
	}
	.popup-content{
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		width: 550rpx;
		// height: 640rpx;
		image{
			height: 200rpx;
			display: block;
			margin: 10rpx auto;
		}
		.text-title{
			margin-top: 40rpx;
			text-align: center;
			color: #ffab03;
			font-weight: bolder;
		}
		.text-content{
			margin-top: 25rpx;
			font-size: 30rpx;
			color: #333;
			view{
				line-height: 50rpx;
				padding: 0 10rpx;
				&:last-child{
					text-align: center;
					margin-top: 15rpx;
					font-weight: bold;
				}
			}
			
		}
		.hidden-btn{
			text-align: center;
			padding: 20rpx 0;
			background-color: #F7AA28;
			color: #FFF;
			width: 80%;
			margin: 25rpx auto 10rpx auto;
			border-radius: 20rpx;
		}
	}
</style>
